<template>
    <ul class="box">
        <li @click="goHome" :class="{ active: status === 'Home' }">
            <i></i>
            <p>首页</p>
        </li>
        <li @click="goCategory" :class="{ active: status === 'Category' }">
            <i></i>
            <p>分类</p>
        </li>
        <li @click="goCart" :class="{ active: status === 'Cart' }">
            <i></i>
            <p>购物车</p>
        </li>
        <li @click="goProfile" :class="{ active: status === 'Profile' }">
            <i></i>
            <p>我的</p>
        </li>
    </ul>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

interface Props {
    status: string
}

const props = withDefaults(defineProps<Props>(), {
    status: 'Home'
})

const goHome = () => {
    router.push({ name: 'Home' })
}

const goCategory = () => {
    router.push({ name: 'Category' })
}

const goCart = () => {
    router.push({ name: 'Cart' })
}


const goProfile = () => {
    router.push({ name: 'Profile' })
}


</script>

<style scoped lang="stylus">
.box
    display flex
    height 13.3vw
    justify-content center
    text-align center
    background-color #fff
.box li
    width 25%
    height 100%
    display flex
    flex-direction column
    justify-content: space-around;
    align-items center
.box li i
    width 24px
    height 24px


.box li:first-child i
    background-image url('@/assets/img/tab_images.png')
    background-size cover
    background-position 0 0

.box li:nth-child(2) i
    background-image url('@/assets/img/tab_images.png')
    background-size cover
    background-position 0 -12.8vw

.box li:nth-child(3) i
    background-image url('@/assets/img/tab_images.png')
    background-size cover
    background-position 0 -38.8vw

.box li:last-child i
    background-image url('@/assets/img/tab_images.png')
    background-size cover
    background-position 0 -51.4vw

.box li:first-child.active i
    background-position 0 -6.4vw

.box li:nth-child(2).active i
    background-position 0 -19.2vw

.box li:nth-child(3).active i
    background-position 0 -44.8vw

.box li:last-child.active i
    background-position 0 -57.4vw

.box li.active p
    color: rgb(132, 95, 63);

.box p
    color: rgb(102, 102, 102);
    font-size: 11px;
</style>